<template>
  <view class="page-container">
    <!-- 固定顶部区域 -->
    <view class="fixed-header">
      <!-- 顶部导航 -->
      <view class="header">
        <view class="back-button" @click="goBack">
          <image class="back-icon" src="/static/back.png"></image>
        </view>
        <text class="page-title">社会招聘</text>
      </view>
    </view>

    <!-- 一级筛选tab -->
    <view class="filter-row">
      <scroll-view scroll-x class="filter-scroll-row">
        <view class="filter-btn"
          v-for="(item, idx) in jobTypeTabs"
          :key="idx"
          :class="{active: activeJobType === item}"
          @click="activeJobType = item"
        >
          {{ item }}
        </view>
      </scroll-view>
    </view>

    <!-- 子筛选按钮 -->
    <view class="sub-filter-row">
      <view
        class="sub-filter-btn"
        :style="isTabExpanded(sub.key) ? 'color:#00b386;font-weight:700;background:none;' : 'background:none;'"
        :class="{
          selected: subFilterSelected[sub.key] !== '不限' || isTabExpanded(sub.key),
          expanded: isTabExpanded(sub.key)
        }"
        v-for="sub in subFilters"
        :key="sub.key"
        @click="
          sub.key === 'city'
            ? openCityPopup()
            : sub.key === 'degree'
              ? openEducationPopup()
              : sub.key === 'exp'
                ? openExperiencePopup()
                : sub.key === 'salary'
                  ? openSalaryPopup()
                  : toggleSubFilter(sub.key)
        "
      >
        <text v-if="sub.key !== 'city'">
          {{ subFilterSelected[sub.key] === '不限' ? sub.label : subFilterSelected[sub.key] }}
        </text>
        <text v-else>
          {{ cityBtnText() }}
        </text>
        <text
          class="arrow"
          :style="isTabExpanded(sub.key) ? 'color:#00b386;font-weight:700;' : ''"
        >{{ isTabExpanded(sub.key) ? '▲' : '▼' }}</text>
      </view>
    </view>

    <view class="scrollable-content">
      <scroll-view class="job-list-scroll" scroll-y="true">
        <!-- 职位列表骨架屏 -->
        <view v-if="isLoading" class="skeleton-list">
          <view v-for="n in 6" :key="n" class="skeleton-card">
            <view class="skeleton-title"></view>
            <view class="skeleton-row">
              <view class="skeleton-company"></view>
              <view class="skeleton-tag"></view>
              <view class="skeleton-tag"></view>
            </view>
            <view class="skeleton-meta"></view>
          </view>
        </view>
        <!-- 职位列表 -->
        <view v-else-if="error" class="error-state">加载失败: {{ error }}</view>
        <view v-else class="job-list">
          <view v-if="filteredJobs.length === 0" class="empty-state">
            <view class="empty-icon">📋</view>
            <view class="empty-text">暂时没有符合条件的岗位，换个筛选试试吧~</view>
            <button class="reset-btn" @click="resetFilters">重置筛选</button>
          </view>
          <view v-for="(job, idx) in filteredJobs" :key="idx" class="job-card" @click="goToJobDetail(job.id)">
            <view class="job-title-row">
              <text class="job-title">{{ job.title }}</text>
              <text class="job-salary">{{ job.salary }}</text>
            </view>
            <view class="job-company-row">
              <text class="company">{{ job.company }}</text>
              <text class="tag" v-for="(tag, i) in job.tags" :key="i">{{ tag }}</text>
            </view>
            <view class="job-meta">
              <text class="meta">{{ job.date }}</text>
              <text class="meta">{{ job.location }}</text>
              <text class="meta">{{ job.views }}看过</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 美团风格城市弹窗 -->
    <view v-if="cityPopupVisible" class="city-popup-mask" @click="closeCityPopup">
      <view class="city-popup city-popup-bottom" @click.stop>
        <view class="city-popup-header">
          <view class="city-popup-title">选择城市</view>
          <view class="city-popup-close" @click="closeCityPopup">×</view>
        </view>
        <view class="city-popup-content">
          <!-- 有省份分组 -->
          <view v-if="Array.isArray(sortedLocationData) && typeof sortedLocationData[0] === 'object' && sortedLocationData[0].province" class="province-list">
            <!-- 全部省份选项 -->
            <view
              :class="['province-item', {active: selectedProvince === '全部'}]"
              @click="selectAllProvince"
            >
              全部
            </view>
            <view
              v-for="item in sortedLocationData"
              :key="item.province"
              :class="['province-item', {active: selectedProvince === item.province}]"
              @click="selectProvince(item.province)"
            >{{ item.province }}</view>
          </view>
          <view class="city-list">
            <!-- 有省份分组 -->
            <view v-if="Array.isArray(sortedLocationData) && typeof sortedLocationData[0] === 'object' && sortedLocationData[0].province">
              <view
                :class="['city-item', {active: selectedCities.includes('全部城市')}]"
                @click="toggleAllCities"
              >
                <text>全部城市</text>
              </view>
              <view
                v-for="city in (sortedLocationData.find(i => i.province === selectedProvince)?.cities || [])"
                :key="city"
                :class="['city-item', {active: selectedCities.includes(city)}]"
                @click="toggleCity(city)"
              >
                <text>{{ city }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="city-popup-footer">
          <button class="city-popup-clear" @click="clearCity" :disabled="!selectedCities.length">清除</button>
          <button class="city-popup-confirm" :disabled="selectedCities.length === 0 && selectedProvince !== '全部'" @click="confirmCity">确定</button>
        </view>
      </view>
    </view>

    <!-- 学历弹窗 -->
    <view v-if="educationPopupVisible" class="city-popup-mask" @click="closeEducationPopup">
      <view class="city-popup city-popup-bottom" @click.stop>
        <view class="city-popup-header">
          <view class="city-popup-title">选择学历</view>
          <view class="city-popup-close" @click="closeEducationPopup">×</view>
        </view>
        <view class="popup-content-center">
          <view
            v-for="item in educationData"
            :key="item"
            :class="['center-item', {active: selectedEducations.includes(item)}]"
            @click="toggleEducation(item)"
          >{{ item }}</view>
        </view>
        <view class="city-popup-footer">
          <button class="city-popup-clear" @click="clearEducation">清除</button>
          <button class="city-popup-confirm" @click="confirmEducation">确定</button>
        </view>
      </view>
    </view>

    <!-- 经验弹窗 -->
    <view v-if="experiencePopupVisible" class="city-popup-mask" @click="closeExperiencePopup">
      <view class="city-popup city-popup-bottom" @click.stop>
        <view class="city-popup-header">
          <view class="city-popup-title">选择经验</view>
          <view class="city-popup-close" @click="closeExperiencePopup">×</view>
        </view>
        <view class="popup-content-center">
          <view
            v-for="item in experienceData"
            :key="item"
            :class="['center-item', {active: selectedExperiences.includes(item)}]"
            @click="toggleExperience(item)"
          >{{ item }}</view>
        </view>
        <view class="city-popup-footer">
          <button class="city-popup-clear" @click="clearExperience">清除</button>
          <button class="city-popup-confirm" @click="confirmExperience">确定</button>
        </view>
      </view>
    </view>

    <!-- 薪资弹窗 -->
    <view v-if="salaryPopupVisible" class="city-popup-mask" @click="closeSalaryPopup">
      <view class="city-popup city-popup-bottom" @click.stop>
        <view class="city-popup-header">
          <view class="city-popup-title">选择薪资</view>
          <view class="city-popup-close" @click="closeSalaryPopup">×</view>
        </view>
        <view class="popup-content-center">
          <view
            v-for="item in salaryData"
            :key="item"
            :class="['center-item', {active: selectedSalaries.includes(item)}]"
            @click="toggleSalary(item)"
          >{{ item }}</view>
        </view>
        <view class="city-popup-footer">
          <button class="city-popup-clear" @click="clearSalary">清除</button>
          <button class="city-popup-confirm" @click="confirmSalary">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0, // 状态栏高度
      jobTypeTabs: ['全部', 'IT/互联网', '游戏', '半导体', 'IT', '导体'],
      activeJobType: '全部',
      subFilters: [
        {
          key: 'city',
          label: '城市',
          options: ['不限', '北京', '上海', '深圳', '广州']
        },
        {
          key: 'degree',
          label: '学历',
          options: ['不限', '本科', '硕士', '博士']
        },
        {
          key: 'exp',
          label: '经验',
          options: ['不限', '应届', '1-3年', '3-5年']
        },
        {
          key: 'salary',
          label: '薪资',
          options: ['不限', '5k-10k', '10k-20k', '20k+']
        }
      ],
      subFilterSelected: {
        city: '不限',
        degree: '不限',
        exp: '不限',
        salary: '不限'
      },
      subFilterVisible: '',
      isLoading: true,
      error: null,
      jobs: [], // 接口返回的数据
      cityPopupVisible: false,
      selectedProvince: '',
      selectedCities: [],
      educationData: ['不限', '大专', '本科', '硕士', '博士'],
      experienceData: ['不限', '应届', '1-3年', '3-5年', '5年以上'],
      salaryData: ['不限', '5k-10k', '10k-20k', '20k+'],
      educationPopupVisible: false,
      experiencePopupVisible: false,
      salaryPopupVisible: false,
      selectedEducations: [],
      selectedExperiences: [],
      selectedSalaries: [],
      locationData: [
        { province: '广东', cities: ['广州', '深圳', '珠海'] },
        { province: '北京', cities: ['北京'] },
        { province: '上海', cities: ['上海'] },
        { province: '江苏', cities: ['南京', '苏州', '无锡'] },
        { province: '四川', cities: ['成都', '绵阳', '乐山', '自贡'] }
      ]
    }
  },
  computed: {
    filteredJobs() {
      return this.jobs.filter(job => {
        // 一级筛选
        const jobTypeMatch = this.activeJobType === '全部' || (job.jobType && job.jobType.includes(this.activeJobType));
        // 二级筛选
        const cityKey = this.subFilterSelected.city;
        const degreeKey = this.subFilterSelected.degree;
        const expKey = this.subFilterSelected.exp;
        const salaryKey = this.subFilterSelected.salary;

        const cityMatch =
          cityKey === '不限' ||
          cityKey === '全部城市' ||
          cityKey === '城市' ||
          (cityKey && job.location && job.location.includes(cityKey)) ||
          (!cityKey || cityKey === '城市');
        const educationMatch =
          degreeKey === '不限' ||
          degreeKey === '学历' ||
          (degreeKey && job.education && (degreeKey.includes('学历·') || degreeKey === job.education));
        const experienceMatch =
          expKey === '不限' ||
          expKey === '经验' ||
          (expKey && job.experience && (expKey.includes('经验·') || expKey === job.experience));
        const salaryMatch =
          salaryKey === '不限' ||
          salaryKey === '薪资' ||
          (salaryKey && job.salary && (salaryKey.includes('薪资·') || salaryKey === job.salary));
        return jobTypeMatch && cityMatch && educationMatch && experienceMatch && salaryMatch;
      });
    },
    sortedLocationData() {
      // 省份和城市按拼音首字母排序，并合并同名省份
      if (Array.isArray(this.locationData) && typeof this.locationData[0] === 'object' && this.locationData[0].province) {
        // 合并同名省份
        const provinceMap = {};
        this.locationData.forEach(item => {
          if (!provinceMap[item.province]) {
            provinceMap[item.province] = new Set(item.cities);
          } else {
            item.cities.forEach(city => provinceMap[item.province].add(city));
          }
        });
        // 转为数组并排序
        return Object.keys(provinceMap)
          .map(province => ({
            province,
            cities: Array.from(provinceMap[province]).sort((a, b) => a.localeCompare(b, 'zh', {sensitivity: 'base'}))
          }))
          .sort((a, b) => a.province.localeCompare(b.province, 'zh', {sensitivity: 'base'}));
      }
      return this.locationData;
    },
    currentProvinceCities() {
      if (Array.isArray(this.sortedLocationData) && typeof this.sortedLocationData[0] === 'object' && this.sortedLocationData[0].province) {
        return (this.sortedLocationData.find(i => i.province === this.selectedProvince)?.cities) || [];
      }
      return [];
    },
    isAllCitiesSelected() {
      return this.currentProvinceCities.length > 0 &&
        this.currentProvinceCities.every(city => this.selectedCities.includes(city));
    }
  },
  onLoad() {
    // 获取状态栏高度
    const sys = uni.getSystemInfoSync();
    this.statusBarHeight = sys.statusBarHeight || (sys.safeAreaInsets && sys.safeAreaInsets.top) || 0;
    this.fetchCampusJobs();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    async fetchCampusJobs() {
      this.isLoading = true;
      this.error = null;
      try {
        // 实际接口调用
        // const res = await uni.request({
        //   url: 'https://api.example.com/v1/campus-jobs',
        //   method: 'GET',
        //   data: {
        //     jobType: this.activeJobType === '全部' ? '' : this.activeJobType,
        //     city: this.subFilterSelected.city === '不限' ? '' : this.subFilterSelected.city,
        //     degree: this.subFilterSelected.degree === '不限' ? '' : this.subFilterSelected.degree,
        //     experience: this.subFilterSelected.exp === '不限' ? '' : this.subFilterSelected.exp,
        //     salary: this.subFilterSelected.salary === '不限' ? '' : this.subFilterSelected.salary,
        //   }
        // });

        // Mock数据 - 社会招聘职位
        this.jobs = [
          {
            id: 'social1',
            title: '腾讯-高级前端开发工程师',
            company: '腾讯',
            salary: '30-50k',
            tags: ['互联网', '前端', '高级'],
            date: '2025-4',
            location: '深圳南山',
            views: 1200,
            jobType: ['IT/互联网'],
            experience: '5年以上',
            education: '本科',
            recruitType: '社会招聘'
          },
          {
            id: 'social2',
            title: '字节跳动-产品经理',
            company: '字节跳动',
            salary: '35-60k',
            tags: ['互联网', '产品', '管理'],
            date: '2025-4',
            location: '北京海淀',
            views: 2100,
            jobType: ['IT/互联网'],
            experience: '3-5年',
            education: '本科',
            recruitType: '社会招聘'
          },
          {
            id: 'social3',
            title: '阿里云-云计算架构师',
            company: '阿里巴巴',
            salary: '45-80k',
            tags: ['云计算', '架构', '高级'],
            date: '2025-4',
            location: '杭州西湖',
            views: 980,
            jobType: ['IT/互联网'],
            experience: '5年以上',
            education: '硕士',
            recruitType: '社会招聘'
          },
          {
            id: 'social4',
            title: '美团-数据分析师',
            company: '美团',
            salary: '25-40k',
            tags: ['数据分析', '互联网', 'Python'],
            date: '2025-4',
            location: '北京朝阳',
            views: 1500,
            jobType: ['IT/互联网'],
            experience: '3-5年',
            education: '本科',
            recruitType: '社会招聘'
          },
          {
            id: 'social5',
            title: '小米-Android开发工程师',
            company: '小米',
            salary: '28-45k',
            tags: ['Android', '移动开发', '智能硬件'],
            date: '2025-4',
            location: '北京海淀',
            views: 800,
            jobType: ['IT/互联网'],
            experience: '3-5年',
            education: '本科',
            recruitType: '社会招聘'
          },
          {
            id: 'social6',
            title: '百度-AI算法工程师',
            company: '百度',
            salary: '40-70k',
            tags: ['AI', '算法', '机器学习'],
            date: '2025-4',
            location: '北京上地',
            views: 1800,
            jobType: ['IT/互联网'],
            experience: '5年以上',
            education: '硕士',
            recruitType: '社会招聘'
          },
          {
            id: 'social7',
            title: '京东-供应链管理专员',
            company: '京东',
            salary: '20-35k',
            tags: ['供应链', '管理', '物流'],
            date: '2025-4',
            location: '北京亦庄',
            views: 650,
            jobType: ['物流'],
            experience: '3-5年',
            education: '本科',
            recruitType: '社会招聘'
          },
          {
            id: 'social8',
            title: '网易-游戏策划',
            company: '网易',
            salary: '25-45k',
            tags: ['游戏', '策划', '产品'],
            date: '2025-4',
            location: '杭州滨江',
            views: 1200,
            jobType: ['游戏'],
            experience: '3-5年',
            education: '本科',
            recruitType: '社会招聘'
          },
          {
            id: 'social9',
            title: '蜂鸟-高级UI设计师',
            company: '蜂鸟',
            salary: '22-38k',
            tags: ['UI设计', '交互设计', '设计'],
            date: '2025-4',
            location: '上海浦东',
            views: 950,
            jobType: ['设计'],
            experience: '3-5年',
            education: '本科',
            recruitType: '社会招聘'
          },
          {
            id: 'social10',
            title: '知乎-内容运营专员',
            company: '知乎',
            salary: '18-30k',
            tags: ['内容运营', '社区', '运营'],
            date: '2025-4',
            location: '北京朝阳',
            views: 720,
            jobType: ['运营'],
            experience: '1-3年',
            education: '本科',
            recruitType: '社会招聘'
          }
        ];
      } catch (error) {
        this.error = '加载失败，请重试';
        console.error('获取校园招聘数据失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    // 城市选择相关方法
    openCityPopup() {
      this.cityPopupVisible = true;
      if (Array.isArray(this.locationData) && typeof this.locationData[0] === 'object' && this.locationData[0].province) {
        this.selectedProvince = this.locationData[0].province;
      }
    },
    closeCityPopup() {
      this.cityPopupVisible = false;
    },
    selectAllProvince() {
      this.selectedProvince = '全部';
    },
    selectProvince(province) {
      this.selectedProvince = province;
    },
    toggleAllCities() {
      if (this.selectedCities.includes('全部城市')) {
        this.selectedCities = [];
      } else {
        this.selectedCities = ['全部城市'];
      }
    },
    toggleCity(city) {
      if (this.selectedCities.includes('全部城市')) {
        this.selectedCities = [];
      }
      const idx = this.selectedCities.indexOf(city);
      if (idx > -1) {
        this.selectedCities.splice(idx, 1);
      } else {
        this.selectedCities.push(city);
      }
    },
    clearCity() {
      this.selectedCities = [];
    },
    confirmCity() {
      if (this.selectedCities.includes('全部城市')) {
        this.subFilterSelected.city = '全部城市';
      } else if (this.selectedCities.length === 1) {
        this.subFilterSelected.city = this.selectedCities[0];
      } else if (this.selectedCities.length > 1) {
        this.subFilterSelected.city = `城市·${this.selectedCities.length}`;
      } else {
        this.subFilterSelected.city = '不限';
      }
      this.closeCityPopup();
    },
    cityBtnText() {
      if (this.selectedProvince === '全部' && (this.selectedCities.includes('全部城市') || this.selectedCities.length === 0)) {
        return '全部';
      }
      if (this.selectedCities.includes('全部城市')) {
        return '全部';
      }
      if (this.selectedCities.length > 1) {
        return `城市·${this.selectedCities.length}`;
      }
      if (this.selectedCities.length === 1) {
        return this.selectedCities[0];
      }
      return '城市';
    },

    // 学历选择相关方法
    openEducationPopup() {
      this.educationPopupVisible = true;
    },
    closeEducationPopup() {
      this.educationPopupVisible = false;
    },
    toggleEducation(item) {
      if (item === '不限') {
        this.selectedEducations = ['不限'];
      } else {
        const idx = this.selectedEducations.indexOf(item);
        if (this.selectedEducations.includes('不限')) {
          this.selectedEducations = [item];
        } else if (idx > -1) {
          this.selectedEducations.splice(idx, 1);
        } else {
          this.selectedEducations.push(item);
        }
      }
    },
    clearEducation() {
      this.selectedEducations = [];
    },
    confirmEducation() {
      if (this.selectedEducations.length === 1) {
        this.subFilterSelected.degree = this.selectedEducations[0];
      } else if (this.selectedEducations.length > 1) {
        this.subFilterSelected.degree = `学历·${this.selectedEducations.length}`;
      } else {
        this.subFilterSelected.degree = '学历';
      }
      this.closeEducationPopup();
    },

    // 经验选择相关方法
    openExperiencePopup() {
      this.experiencePopupVisible = true;
    },
    closeExperiencePopup() {
      this.experiencePopupVisible = false;
    },
    toggleExperience(item) {
      if (item === '不限') {
        this.selectedExperiences = ['不限'];
      } else {
        const idx = this.selectedExperiences.indexOf(item);
        if (this.selectedExperiences.includes('不限')) {
          this.selectedExperiences = [item];
        } else if (idx > -1) {
          this.selectedExperiences.splice(idx, 1);
        } else {
          this.selectedExperiences.push(item);
        }
      }
    },
    clearExperience() {
      this.selectedExperiences = [];
    },
    confirmExperience() {
      if (this.selectedExperiences.length === 1) {
        this.subFilterSelected.exp = this.selectedExperiences[0];
      } else if (this.selectedExperiences.length > 1) {
        this.subFilterSelected.exp = `经验·${this.selectedExperiences.length}`;
      } else {
        this.subFilterSelected.exp = '经验';
      }
      this.closeExperiencePopup();
    },

    // 薪资选择相关方法
    openSalaryPopup() {
      this.salaryPopupVisible = true;
    },
    closeSalaryPopup() {
      this.salaryPopupVisible = false;
    },
    toggleSalary(item) {
      if (item === '不限') {
        this.selectedSalaries = ['不限'];
      } else {
        const idx = this.selectedSalaries.indexOf(item);
        if (this.selectedSalaries.includes('不限')) {
          this.selectedSalaries = [item];
        } else if (idx > -1) {
          this.selectedSalaries.splice(idx, 1);
        } else {
          this.selectedSalaries.push(item);
        }
      }
    },
    clearSalary() {
      this.selectedSalaries = [];
    },
    confirmSalary() {
      if (this.selectedSalaries.length === 1) {
        this.subFilterSelected.salary = this.selectedSalaries[0];
      } else if (this.selectedSalaries.length > 1) {
        this.subFilterSelected.salary = `薪资·${this.selectedSalaries.length}`;
      } else {
        this.subFilterSelected.salary = '薪资';
      }
      this.closeSalaryPopup();
    },

    // 其他方法
    isTabExpanded(key) {
      if (key === 'city') return this.cityPopupVisible;
      if (key === 'degree') return this.educationPopupVisible;
      if (key === 'exp') return this.experiencePopupVisible;
      if (key === 'salary') return this.salaryPopupVisible;
      return this.subFilterVisible === key;
    },
    resetFilters() {
      this.selectedCities = [];
      this.selectedEducations = [];
      this.selectedExperiences = [];
      this.selectedSalaries = [];
      this.subFilterSelected = {
        city: '不限',
        degree: '不限',
        exp: '不限',
        salary: '不限'
      };
      this.activeJobType = '全部';
      this.fetchCampusJobs();
    },
    goToJobDetail(id) {
      if (!id) return;
      uni.navigateTo({
        url: `/pages/job-detail/index?id=${id}`
      });
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(
    180deg,
    #F0FDF8 0%,
    #E6FAF5 20%,
    #D0F0EE 50%,
    #E8F5E4 80%,
    #F8FBF8 95%,
    #FFFFFF 100%
  );
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
}

.header {
  position: relative;
  background: transparent;
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.back-button {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  backdrop-filter: blur(20rpx);
  border: 2rpx solid rgba(16, 185, 129, 0.2);
  box-shadow:
    0 8rpx 20rpx rgba(0, 0, 0, 0.15),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.back-button:active {
  transform: scale(0.9) translateY(2rpx);
  background: rgba(16, 185, 129, 0.25);
  box-shadow:
    0 4rpx 12rpx rgba(0, 0, 0, 0.2),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.2);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #222;
  text-align: center;
}

/* 调整筛选按钮区域的位置 */
.filter-row {
  height: 62rpx;
  margin-top: 200rpx; /* 为固定头部留出空间 */
  flex-direction: row;
  display: flex;
  margin-left: 30rpx;
  margin-right: 30rpx;
  overflow: hidden;
}

.filter-scroll-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  white-space: nowrap;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56rpx;
  line-height: 56rpx;
  padding: 0 32rpx;
  border-radius: 28rpx;
  background: #f2f2f2;
  color: #666;
  font-size: 28rpx;
  margin-right: 16rpx;
  margin-bottom: 8rpx;
  white-space: nowrap;
  box-sizing: border-box;
}

.filter-btn.active {
  background: #00b386;
  color: #fff;
}

.sub-filter-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin: 4rpx 0 8rpx 0; /* 缩短与一级筛选的间距 */
  background: transparent !important; /* 彻底透明背景 */
  border-radius: 0; /* 移除圆角 */
  box-shadow: none; /* 移除阴影 */
  padding: 0 16rpx; /* 统一内边距 */
  gap: 16rpx;
  height: auto;
  position: relative;
  z-index: 2;
  color: #444; /* 恢复颜色 */
}

.sub-filter-btn {
  flex: 1;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  height: 40rpx;
  color: #888;
  border-radius: 20rpx;
  position: relative;
  padding: 0 12rpx;
  margin: 0;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.sub-filter-btn.selected,
.sub-filter-btn.expanded {
  color: #00b386 !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.sub-filter-btn .arrow {
  font-size: 16rpx;
  margin-left: 6rpx;
  color: #bbb;
  transition: color 0.2s;
}

.sub-filter-btn.selected .arrow,
.sub-filter-btn.expanded .arrow {
  color: #00b386 !important;
  font-weight: 700 !important;
}

.scrollable-content {
  flex: 1;
  height: calc(100vh - 280rpx);
  background: transparent;
}

.job-list-scroll {
  height: 100%;
  padding: 0;
}

.job-list {
  margin: 0 30rpx;
  padding-bottom: 40rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
  color: #97a3af;
  font-size: 28rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 24rpx;
  opacity: 0.6;
}

.empty-text {
  margin-bottom: 24rpx;
  font-size: 24rpx;
  color: #97a3af;
}

.reset-btn {
  background: #05a723;
  color: #fff;
  border: none;
  border-radius: 32rpx;
  padding: 0 40rpx;
  height: 44rpx;
  font-size: 24rpx;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.job-list {
  margin: 0 30rpx;
  padding-bottom: 140rpx;
}

.job-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
}

.job-title-row {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #222;
}

.job-salary {
  color: #ff2d2d;
  font-size: 32rpx;
  font-weight: 700;
}

.job-company-row {
	 flex-direction: row;
  display: flex;
  align-items: center;
  margin: 16rpx 0;
}

.company {
  color: #666;
  font-size: 26rpx;
  margin-right: 16rpx;
}

.recruit-type {
  color: #00b386;
  font-size: 26rpx;
  margin-right: 16rpx;
}

.tag {
  background: #f2f2f2;
  color: #888;
  font-size: 22rpx;
  border-radius: 8rpx;
  padding: 2rpx 10rpx;
  margin-right: 8rpx;
}

.job-meta {
	 flex-direction: row;
  display: flex;
  color: #bbb;
  font-size: 22rpx;
  gap: 24rpx;
}

.meta {
  color: #bbb;
  font-size: 22rpx;
}

.empty-state {
  text-align: center;
  color: #999;
  margin-top: 100rpx;
  font-size: 28rpx;
}

.empty-image {
  width: 200rpx;
  height: 60rpx;
  margin-bottom: 32rpx;
  opacity: 0.7;
}

.empty-text {
  margin-bottom: 32rpx;
  font-size: 28rpx;
  color: #888;
}

.reset-btn {
  background: #00b386;
  color: #fff;
  border: none;
  border-radius: 32rpx;
  padding: 0 60rpx;
  height: 64rpx;
  font-size: 28rpx;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 骨架屏样式 */
.skeleton-list {
  margin: 0 30rpx;
  padding-bottom: 140rpx;
}

.skeleton-card {
  background: #f6f7f9;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  animation: skeleton-loading 1.2s infinite linear;
}

.skeleton-title {
  width: 60%;
  height: 32rpx;
  background: #eaeaea;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}

.skeleton-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.skeleton-company {
  width: 80rpx;
  height: 26rpx;
  background: #eaeaea;
  border-radius: 8rpx;
  margin-right: 16rpx;
}

.skeleton-tag {
  width: 48rpx;
  height: 22rpx;
  background: #eaeaea;
  border-radius: 8rpx;
  margin-right: 8rpx;
}

.skeleton-meta {
  width: 40%;
  height: 22rpx;
  background: #eaeaea;
  border-radius: 8rpx;
}

@keyframes skeleton-loading {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.error-state {
  text-align: center;
  color: #999;
  margin-top: 100rpx;
  font-size: 28rpx;
}

.city-popup-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.city-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 0;
  box-sizing: border-box;
  max-height: 70vh;
  overflow: hidden;
  z-index: 1001;
}

.city-popup-bottom {
  animation: popupSlideUp 0.3s;
}

@keyframes popupSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.city-popup-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 0 32rpx;
}

.city-popup-title {
  font-size: 32rpx;
  font-weight: 700;
}

.city-popup-close {
  font-size: 40rpx;
  color: #bbb;
  cursor: pointer;
  font-weight: 400;
  line-height: 1;
}

.city-popup-content {
  display: flex;
  flex-direction: row;
  min-height: 120rpx;
  max-height: calc(70vh - 96rpx);
  overflow-y: auto;
  margin-top: 24rpx;
  padding-bottom: 96rpx;
}

.province-list {
  width: 180rpx;
  border-right: 1rpx solid #eee;
  overflow-y: auto;
  background: #f7f8fa;
}

.province-item {
  padding: 24rpx 0;
  text-align: center;
  color: #666;
  cursor: pointer;
  font-size: 28rpx;
  transition: background 0.2s, color 0.2s;
}

.province-item.active {
  color: #222;
  font-weight: 700;
  background: #fff;
}

.city-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #fff;
}

.city-item {
  flex-direction: row;
  place-items: center;
  padding: 24rpx 0;
  text-align: center;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  transition: background 0.2s, color 0.2s;
}

.city-item.active {
  color: #00b386;
  font-weight: 700;
  background: #e6faf5;
}

.city-popup-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 32rpx 40rpx 32rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  border-top: 20rpx solid #ffffff;
  min-height: 80rpx;
  gap: 24rpx;
  z-index: 2;
}

.city-popup-clear {
  flex-direction: row;
  place-items: center;
  background: #fff;
  color: #888;
  border: 1rpx solid #ccc;
  border-radius: 16rpx;
  padding: 0 60rpx;
  height: 64rpx;
  font-size: 30rpx;
  margin-bottom: 0;
  cursor: pointer;
  transition: border 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.city-popup-clear:disabled {
  color: #ccc;
  border-color: #eee;
  cursor: not-allowed;
}

.city-popup-confirm {
  background: #00b386;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  padding: 0 200rpx;
  height: 64rpx;
  font-size: 30rpx;
  margin-left: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.city-popup-confirm:disabled {
  background: #ccc;
  color: #fff;
}

.popup-content-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 32rpx 0 0 0;
  min-height: 120rpx;
  max-height: 60vh;
  overflow-y: auto;
  gap: 24rpx 32rpx;
}

.center-item {
  min-width: 120rpx;
  padding: 16rpx 32rpx;
  border-radius: 32rpx;
  background: none;
  color: #666;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 12rpx;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-weight: 400;
}

.center-item.active {
  color: #00b386;
  font-weight: 700;
}
</style> 